<template>
  <div>
    <ul>
      <li v-for="(first,index) in label" :key="index" @click="index++">
        {{ first }}
        <ul>
          <li v-for="second in children[index]" :key="second">{{ second }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import dish from "@/api/dish.js";
export default {
  mounted() {
    this.getCategory();
  },
  data() {
    return {
      filterText: "",
      label: [],
      children: [],
      data: {},
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },

  methods: {
    getCategory() {
      dish.getAllCategory().then(resp => {
        this.data = resp.data.dishCategoryVo;
        for (var key in this.data) {
          this.label.push(key), 
          this.children.push(this.data[key]);
        }
        console.log(this.label)
        console.log(this.children)
      });
    },
  }
};
</script>

